import React ,{useState}from "react";
import { Modal,Form, Button,Input,Select,InputNumber }  from 'antd'
import { ProFormUploadButton } from '@ant-design/pro-form';
import { upload } from "@/services/ant-design-pro/apis";

const FormItem = Form.Item;
const { TextArea } = Input;
const { Option } = Select;

const CreateChannel  = (props) => {

    const formLayout = {
        labelCol: {
            span: 5,
        },
        wrapperCol: {
            span: 15,
        },
    };
    
    const [formVals, setFormVals] = useState({})
    const [fields, setFields] = useState([])
    const [form] = Form.useForm();

    const apis=props.apis;


    const {
        onSubmit: handCreate,
        onCancel: handleModalVisible,
        createModalVisible,
    } = props


    const selectOnChange=(value)=>{

        apis?.map((item)=>{
            if(item.id==value){
                setFields(JSON.parse(item.apiInfo))
            }
        })
}
    const handleSubmit = async () => {
        try {
            const fieldVlas = await form.validateFields();
            fieldVlas.apiInfo=JSON.stringify(fieldVlas.apiInfo)
            console.log(fieldVlas)
            handCreate({ ...fieldVlas })
            onReset()
        } catch (err) {
            console.log(err)
        }
    }

    const onReset = () => {
        form.resetFields();
    }


    return (
        <Modal
            title="新建渠道"
            width={540}
            visible={createModalVisible}
            destroyOnClose
            onCancel={() => {
                onReset();
                handleModalVisible(false)
            }}
            footer={[
                <Button key="reset" onClick={onReset}>重置</Button>,
                <Button type="primary" key="submit" onClick={() => { handleSubmit() }}>提交</Button>
            ]}
        >
            <Form
              {...formLayout}
              initialValues={
                  {
                    productStatus:99,
                  }
              }
              form={form}
            >
                <FormItem
                  label="渠道名称"
                  name="channelName"
                  rules={[{
                      required:true,
                      message:'渠道名称是必须项'
                  }]}
                >
                    <Input placeholder="请输入渠道名称"></Input>
                </FormItem>
                <FormItem
                  label="渠道编号"
                  name="channelNum"
                  rules={[{
                    required:true,
                    message:'渠道编号是必须项'
                }]}
                >
                   <Input  placeholder="请输入渠道编号" rows={4}/>
                </FormItem>

                <FormItem
                  label="渠道折扣"
                  name="FormItem"
                  rules={[{
                              required:true,
                              message:"渠道折扣是必须项"
                          }] }
                >
                    <InputNumber placeholder="请输入渠道折扣" style={{ width: '100%' }} />
                </FormItem>

                <FormItem
                    label="api类型"
                    name="apiId"
                    rules={
                        [
                            { 
                                required:true,
                                message:"api类型是必须项"
                            }
                        ]
                    }
                >
                    <Select onChange={selectOnChange}
                    placeholder="请选择api模板"
                    >
                        {apis?.map((item,index)=>{
                                return  <Option key={item.id} value={item.id}>{item.apiName}</Option>
                            })}
                    </Select>
                </FormItem>

             <FormItem
                    label="状态"
                    name="status"
                >
                    <Select>
                        <Option value="INVOKE">启用</Option>
                        <Option value="FORBIDDEN">禁用</Option>
                    </Select>
                </FormItem>
               
                <Form.List name="apiInfo">
             {(data) => (
          <>
            {fields.map((field,index) => (
                <Form.Item
                  label={field.label}
                  name={field.name}
                  key={field.key}
                  rules={[
                    {
                      required: true,
                      message: '请输入参数',
                    },
                  ]}
                >
                  <Input  placeholder={field.placeholder}/>
                </Form.Item>
            ))}
          </>
        )}
      </Form.List>
            </Form>
        </Modal>
    )
}


export default CreateChannel;